import WebUploader from 'webuploader';
var JQUERY_DATA_NAME = 'ad-file';

function AdFileComponent($elm, options) {
    this.$element = $elm;
    this.options = options;
}

AdFileComponent.prototype = {
    constructor: AdFileComponent,
    init: function() {

        let self = this;

        let uploader = WebUploader.create({
            server: 'file/upload.do',
            formData: {
                groupId: self.options.groupId,
                path: "zip/" + self.options.module
            }
        });

        if (self.options.img instanceof Array) {
            let $lis = [];

            for (let img of self.options.img) {
                let $li = $(`<li class="file">
              <div class="file-content">
                  <img alt="">
              </div>
              <div class="file-panel">
                  <span class="cancel"></span>
              </div>
          </li>`);

                let url = img;
                if (self.options.desc) {
                    $li.find(".cancel").before($(`<span class="title" style="width:-webkit-calc(100% - 26px); width:-moz-calc(100% - 26px); width:calc(100% - 26px); float: left; padding-left: 0; color: #000000;">
                                        <input type="text" value="` + img.desc + `">
                              </span>`));
                    url = img.img;
                }
                let src = url.split("/");

                $li.attr("data-file", "/Hotel/" + self.options.module + "/" + src[src.length - 1]);
                $li.find("img").attr("src", "file/image/" + self.options.groupId + "/" + src[src.length - 2] + "/" + src[src.length - 1]);

                $li.find(".cancel").on("click", function() {
                    self.options.removeCallback("/zip/" + src[src.length - 2] + "/" + src[src.length - 1]);
                    $li.remove();
                });
                $lis.push($li);
            }
            $lis.push($(`<li class="file add-icon"><input type="file"></li>`));

            self.$element.append($lis);

            uploader.onFileQueued = function(file) {

                uploader.makeThumb(file, function(error, src) {

                    let $li = $(`<li class="file">
                    <div class="file-content">
                        <img alt="">
                    </div>
                    <div class="file-panel">
                        <span class="cancel"></span>
                    </div>
                </li>`);

                    if (self.options.desc) {
                        $li.find(".cancel").before($(`<span class="title" style="width:-webkit-calc(100% - 26px); width:-moz-calc(100% - 26px); width:calc(100% - 26px); float: left; padding-left: 0; color: #000000;">
                                        <input type="text" value="">
                              </span>`));
                    }

                    $li.attr("data-file", "/Hotel/" + self.options.module + "/" + file.name);
                    $li.find("img").attr("src", error ? "" : src);

                    $li.find(".cancel").on("click", function() {
                        uploader.removeFile(file, true);
                        $li.remove();
                    });

                    self.$element.find(".add-icon").before($li);

                }, 1, 1);

            };

        } else {

            let $emptyDiv = $(`<div class="add-icon"><input type="file"></div>`);
            let $imgDiv = $(`<div class="img-single"><p class="imgWrap"><img width="100%" height="auto"></p><div class="file-panel"><span class="cancel"></span></div></div>`);

            if (self.options.img == "") {
                self.$element.attr("data-file", "");
                self.$element.empty().append($emptyDiv);
            } else {
                let src = self.options.img.split("/");
                $imgDiv.find("img").attr("src", "file/image/" + self.options.groupId + "/" + src[src.length - 2] + "/" + src[src.length - 1]);
                self.$element.empty().append($imgDiv);
                self.$element.attr("data-file", "/Hotel/" + self.options.module + "/" + src[src.length - 1]);
                $imgDiv.on("click", ".cancel", function() {
                    self.options.removeCallback("/zip/" + src[src.length - 2] + "/" + src[src.length - 1]);
                    self.$element.attr("data-file", "");
                    self.$element.empty().append($emptyDiv);
                });
            }

            uploader.onFileQueued = function(file) {

                uploader.makeThumb(file, function(error, src) {

                    $imgDiv.find("img").attr("src", error ? "" : src);
                    self.$element.empty().append($imgDiv);
                    self.$element.attr("data-file", "/Hotel/" + self.options.module + "/" + file.name);

                    $imgDiv.on("click", ".cancel", function() {
                        uploader.removeFile(file, true);
                        self.$element.attr("data-file", "");
                        self.$element.empty().append($emptyDiv);
                    });

                }, 1, 1);

            };

        }

        self.$element.on("change", "input[type='file']", function() {
            let file = $(this).prop('files')[0];
            uploader.addFile(file);
            self.$element.find("input[type='file']").val(null);
        });

        return uploader;
    }
}

$.fn.adFile = function(options, param) {
    var component = new AdFileComponent(this, options);
    return component.init();
};

// $.fn.adFile = function() {
//     var args = arguments;
//     console.log(args)
//     return this.each(function(i, item) {
//         var $item = $(item);
//         $item._adFile.apply($item, args);
//     });
// };
//
// $.fn._adFile = function(options, param) {
//
//     var component = this.data(JQUERY_DATA_NAME);
//
//     if (!component) {
//         if (typeof options === 'string') {
//             component = new AdFileComponent(this, {});
//         } else {
//             component = new AdFileComponent(this, options);
//         }
//         this.data(JQUERY_DATA_NAME, component);
//         component.init();
//     }
//
//     if (typeof options === 'string') {
//         component[options].apply(component, Array.prototype.slice.call(arguments, 1));
//     }
//
//     return this;
// }
